{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load display_tags %}
{% block content %}
    {{ block.super }}
    <div class="row">
        <div class="col-md-12">
            {% if alerts %}
            <form id="delete_alerts" method="POST">{% csrf_token %}
                <div class="table-responsive panel panel-default">
                    <table id="open_findings"
                        class="tablesorter-bootstrap table table-bordered table-condensed table-striped table-hover">
                        <thead>
                        <tr>
                            <th>{% trans "Type" %}</th>
                            <th>{% trans "Source" %}</th>
                            <th>{% trans "Title" %}</th>
                            <th>{% trans "Description" %}</th>
                            <th>{% trans "Timeframe" %}</th>
                            <th class="centered" title="{% trans "Select all visible alerts" %}">
                                    <input type="checkbox" name="select_all" id="select_all"/>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for alert in alerts %}
                            <tr>
                                <td class="text-center"><i class="fa-solid fa-{{ alert.icon }} fa-fw"></i></td>
                                <td class="text-center">{{ alert.source }}</td>
                                <td>{%if alert.url %}<a href="{{ alert.url }}">{% endif %}{{ alert.title }}{% if alert.url %}</a>{% endif %}</td>
                                <td>{{ alert.description|markdown_render|linebreaks }}</td>
                                <td>{{ alert.created }}</td>
                                <td class="centered">
                                        <input type="checkbox" name="alert_select" value="{{ alert.id }}"
                                                class="select_one {{ alert.source }}"/>
                                </td>
                                </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <button class="btn btn-primary pull-right" type="submit">{% trans "Remove selected" %}</button>
            </form>
        </div>
        <div class="col-md-12">
            <div class="clearfix">
                {% include "dojo/paging_snippet.html" with page=alerts page_size=False %}
            </div>
            {% else %}
                <p class="text-center">{% trans "No alerts found." %}</p>
            {% endif %}
        </div>
    </div>
{% endblock %}
{% block postscript %}
    {{ block.super }}
<script type="text/javascript" src="{% static "jquery-highlight/jquery.highlight.js" %}"></script>
<script type="text/javascript">
    $(function () {
        $('input#select_all').on('click', function (e) {
            if ($(this).is(":checked")) {
                $('input.select_one').prop('checked', true);
            }
            else {
                $('input.select_one').prop('checked', false);
            }
        });
    });
</script>
{% endblock %}